<template>
  <div class="cart">
    <div class="cart-list">
      <div class="top-bar">
        <a>清空</a>
      </div>
      <ul>
        <li>
          <p>商品名称</p>
          <count></count>
        </li>
      </ul>
    </div>
    <i class="cubeic-mall"></i>
  </div>
</template>

<script>
import Count from './Count'

export default {
  components: {
    Count
  }
}
</script>


<style lang="stylus" scoped>
.cart
  width: 100%
  height: 88px
  background: red
  position: fixed
  left: 0
  bottom: 0
  display: flex
  .cart-list
    background-color: #fff
    position: absolute
    left: 0
    bottom: 88px
    z-index: -1
    width: 100%
    .top-bar
      text-align: right
      font-size: 32px
      padding: 30px 30px
      border-bottom: 1px solid #ddd  
      border-top: 1px solid #ddd    
    ul
      li
        display: flex
        justify-content: space-between
        align-items: center
        padding: 30px
  .cubeic-mall
    font-size: 60px
    width: 80px
    height: 80px
    background-color: blue
    text-align: center
    line-height: 80px
    border-radius: 100%
    margin: -10px 0 0 30px
</style>

